<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>DingDing Login</title>
    <style>
        /* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
        .self-defined-classname {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<!-- STEP1：在HTML中添加包裹容器元素 -->
<div id="self_defined_element" class="self-defined-classname"></div>
<script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>
<script th:inline="javascript">
    var appKey = [[${appKey}]];
    var baseUrl = [[${baseUrl}]];
    var redirectUri =  baseUrl + '/system/dingtalk/auth'

    window.DTFrameLogin(
        {
            id: 'self_defined_element',
            width: 300,
            height: 300
        },
        {
            redirect_uri: encodeURIComponent(redirectUri),
            client_id: appKey,
            scope: 'openid',
            response_type: 'code',
            state: 'torna',
            prompt: 'consent'
        },
        (loginResult) => {
            // 这里可以直接进行重定向
            window.location.href = loginResult.redirectUrl
            // 也可以在不跳转页面的情况下，使用code进行授权
            // console.log(authCode)
        },
        (errorMsg) => {
            // 这里一般需要展示登录失败的具体原因
            alert(`Login Error: ${errorMsg}`)
        },
    )
</script>
</body>
</html>